<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>前端原型 - 图像改造</title>
  <link rel="stylesheet" href="../assets/wireframe.css" />
</head>
<body>
  <div class="app-shell">
    <header class="wf-header">
      <a class="wf-btn" href="./main.html">返回</a>
      <div class="wf-title">图像改造</div>
    </header>
    <main class="wf-container">
      <div class="wf-card">
        <div class="wf-section-title">智能图像处理与风格转换</div>
        <div class="wf-note">上传图片，AI为您进行智能处理和风格转换</div>
      </div>
      
      <!-- 图片上传区域 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">选择图片</div>
        <div class="wf-skeleton" style="height:120px; margin-bottom:12px"></div>
        <div class="wf-grid">
          <div class="col-6"><button class="wf-btn" style="width:100%; margin-bottom:8px;">从相册选择</button></div>
          <div class="col-6"><button class="wf-btn" style="width:100%; margin-bottom:8px;">拍照</button></div>
          <div class="col-6"><button class="wf-btn" style="width:100%;">灵感图片</button></div>
        </div>
      </div>
      
      <!-- 处理选项 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">处理选项</div>
        <div class="wf-grid">
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">风格转换</div><div class="wf-block-desc">改变图片风格</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">背景移除</div><div class="wf-block-desc">智能抠图</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">图片增强</div><div class="wf-block-desc">提升画质</div></a></div>
          <div class="col-6"><a class="wf-block" href="#"><div class="wf-block-thumb"></div><div class="wf-block-title">尺寸调整</div><div class="wf-block-desc">智能缩放</div></a></div>
        </div>
      </div>
      
      <!-- 处理结果 -->
      <div class="wf-card" style="margin-top:12px">
        <div class="wf-section-title">处理结果</div>
        <div class="wf-skeleton" style="height:200px"></div>
        <div class="wf-row" style="margin-top:12px">
          <div class="col-6"><button class="wf-btn primary" style="width:100%; margin-bottom:8px;">保存图片</button></div>
          <div class="col-6"><button class="wf-btn" style="width:100%; margin-bottom:8px;">分享</button></div>
          <div class="col-6"><button class="wf-btn" style="width:100%;">重新处理</button></div>
        </div>
      </div>
    </main>
  </div>
  <script src="../assets/wireframe.js"></script>
</body>
</html>